<!DOCTYPE html>
<html>
    <head>
       <meta http-equiv="content-type" content="text/html;charset=utf-8">
       <script src='jquery.js'></script>
       <style>
        td:hover{
            background-color:#456;
        }
       </style> 
    </head>
    <body>
        <div>
            <table border='1' id='map'>
            </table>
            <table border='1' id='players'>
            </table>

        </div>
        <span>my name is : </span><input type='textarea' id='name'></input>
        <input id = 'submit_name' type='button' onclick='submit_name()' value='submit'></input>
        <input id = 'begin' type='button' onclick='begin_game()' value='begin' style='display:none'></input>
        <script>
            var datasrc = 'http://diver.hao12e.com/tengdiver';
            var boats = [];
            (function(){
                $(document).ready(function(){
                    function createMap(width, height){
                        var thtml = '';
                        for (var i = 0; i < height; ++ i){
                            thtml += '<tr>';
                            for (var j = 0; j < width; ++ j){
                                var id = j+'_'+i;
                                thtml +='<td id ="'+id+'">&nbsp&nbsp&nbsp</td>';
                            }
                            thtml += '</tr>';
                        }
                        $('#map').html(thtml);
                    }
                    var data = {
                        'msg' : 'get_map_size'
                    }
                    data = JSON.stringify(data);
                    $.post(datasrc, data, function(data){
                        data = JSON.parse(data);
                        var width = data.width, height = data.height;
                        window.width = width;
                        window.height = height;
                        createMap(width, height);
                        get_boats_info();
                    });
                });
                $('body').keydown(function(){
                    if (event.keyCode == 13){
                        alert('13');
                    }
                });
            })();
            function log(data){
                try {
                    if (console){
                        console.log(data);
                    }
                }catch(e){}
            }
            function submit_name(){
                $('#submit_name').attr('disabled', 'disabled');
                var name = $('#name').get(0).value;
                var data = {};
                data.name = name;
                data.x = parseInt(Math.random()*width);
                data.y = parseInt(Math.random()*height);
                data.msg = 'init';
                data = JSON.stringify(data);
                $.post(datasrc, data, function(data){
                        log(data);
                        data = JSON.parse(data);
                        if (data.youaremaster){
                            $('#begin').css({'display':''});
                        } else {
                            wait_begin();
                        }
                        alert(data.desc);
                        window.boat = data;
                    });
            }
            function wait_begin(){
                window.wait_begin_id = setInterval(function(){
                    if (window.is_begin_game){
                        return;
                    }
                    var data = {};
                    data.msg = 'ask_begin';
                    data = JSON.stringify(data);
                    $.post(datasrc, data, function(data){
 ;                       if (window.is_begin_game){
                            return;
                        }
                        data = JSON.parse(data);
                        if (data.is_begin_game){
                            window.is_begin_game = true;
                            window.turn_id = data.turn_id;
                            clearInterval(window.wait_begin_id);
                            run();
                        }
                    });
                }, 1000);
            }
            function run(){
            }
            function get_boats_info(){
                data = {}
                data.msg = 'get_boats_info';
                data = JSON.stringify(data);
                $.post(datasrc, data, function(data){
                        log(data);
                        data = JSON.parse(data);
                        if (data.boats){
                            boats = data.boats;
                        }
                        log('draw_boats');
                        draw_boats();
                        draw_players();
                        log('draw_boats end');
                });
            }
            function clear_map(){
                $('#map td').css({'background-color':''});
            }
            function clear_players(){
                $('#players').html('');
            }

            function draw_map(x, y, color){
                var selector = '#'+x+'_'+y;
                log('selector : ' + selector);
                $(selector).css({'background-color':color});
            }

            function draw_boats(){
                clear_map();
                for (var i = 0, len = boats.length; i < len; ++i){
                    log('d : ' + i);
                    var color = boats[i].color;
                    var x = boats[i].x;
                    var y = boats[i].y;
                    draw_map(x, y, color);
                }
            }
            function draw_players(){
                clear_players();
                var str = '';
                for (var i = 0, len = boats.length; i < len; ++i){
                    str += '<tr>';
                    str += '<td style="background-color:'+boats[i].color+'">&nbsp&nbsp</td>';
                    str += '<td>'+boats[i].name+'</td>';
                    str += '</tr>';
                }
                $('#players').html(str);
            }
            function begin_game(){
                var data = {};
                data.msg = 'begin_game';
                data = JSON.stringify(data);
                $.post(datasrc, data, function(data){
                    var data = JSON.parse(data);
                    window.is_begin_game = true;
                    window.turn_id = data.turn_id;
                    run();
                });
            }
        </script>
    </body>
</html>
